<template>
  <div class="help">
      <head :title="$t('my.help_center')"></head>
     <my-div class="transfer-choose">
      <my-text :text="$t('my.help_center')" day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)"  class="transfer-title"></my-text>
      <div class="service wraper">
        <div class="customer">
          <image style="width:106px;height:168px;" src="root:img/my/customer@2x.png"></image> 
        </div>
        <div class="customer-news">
          <image style="width:478px;height:122px;position: absolute;" src="root:img/my/service_c.png"></image>
          <text class="customer-news-text">您好，我是小爱，请问您需要什么帮助吗？</text>
        </div>
      </div>
     </my-div>
     <div class="divilder"></div>
     <!-- <my-div class="question transfer-choose"> -->
        <list>
          <cell v-for="(item,key) of list" :key="key">
            <div class="content transfer-choose" :style="{height:!item.open?'100px':''}" @click="toggle_item_click($event,key,item)">
              <div class="choose-currency"  >
                  <text class="currency-name">{{item.title}}</text>
                  <div class="currency-wrapper">
                    <image class="arrow-down" :style="{'transform':!item.open?'rotate(270deg)':'rotate(90deg)'}"  style="width:18px;height:32px;margin-left:24px;margin-right:24px;" src="root:img/home/right@2x.png"></image>
                  </div>
              </div>
              <div>
                  <text class="content-text">{{item.content}}</text>
              </div>
            </div>
          </cell>
           
        </list>
     <!-- </my-div> -->
  </div>
</template>

<script>
const dom = weex.requireModule('dom')
const animation = weex.requireModule('animation')
export default {
  data() {
    return {
      list: []
    }
  },
  components: {},
  methods: {
    onLoad(){
      this.get_center_content()
    },
    toggle_item_click(e,key,item){
      let height
      dom.getComponentRect(e.target,(ret)=>{
      height = ret.height
      })
      if(item.open){
        // this.special(e.target,{height:'100px'})
        item.open = false
      }else{
        item.open = true
        // this.special(e.target,{height:`${height}px`})
      }
    },
    special(dom, styles) {
      animation.transition(dom, {
        styles,
        duration: 300, //ms
        needLayout:true,
        timingFunction: "ease",
        delay: 100 //ms
      });
    },
    // 获得帮助中心内容
    get_center_content(){
      this.$http.getSilent('index/listHelpCenter',{},(res)=>{
        res.list.forEach((item,key) => {
          if(key === 0) {
            item.open = true
          }else{
            item.open = false
          }
        });
        this.list = res.list
      })
    }
  }
}
</script>
<style scoped>
.wraper{
  display: flex;
  flex-direction: row;
}
.help{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFFFFF;
}
.content{
  transition: all .3s;
}
.divilder{
  width: 750px;
  height: 20px;
  background-color: #f5f6fa;
}
.transfer-choose{
  width: 750px;
  padding-left: 30px;
}
.customer{
  margin-left: 50px;
  margin-right: 36px;
}
.customer-news{
  width:478px;
  height:122px;
  margin-top: 10px;
  justify-items: center;
  align-items: center;
}
.customer-news-text{
  width: 418px;
  height: 80px;
  margin-top: 22px;
  color:rgba(60,71,98,1);
  font-size: 28px;
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;
  margin-bottom: 54px;
}
.content-text{
  margin-top: 20px;
  width: 690px;
  line-height: 40px;
  font-size: 24px;
  color: rgba(154,156,164,1);
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 100px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(233,233,233,1);
}

.currency-value{
  font-size: 28px;
  max-width: 200px;
  lines:1;
  color: rgba(70,120,245,1);
}
.currency-name{
  font-size: 30px;
  color: rgba(60,71,98,1);
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
  height: 100px;
  min-width: 200px;
  align-items: center;
  justify-content: flex-end;
}
</style>